import SwiftUI

struct HomeView: View {
    @State private var showingCamera = false
    @State private var showingPhotoPicker = false
    @State private var animateTitle = false
    @State private var animateButtons = false
    
    var body: some View {
        NavigationStack {
            ZStack {
                // Background gradient
                backgroundGradient
                
                VStack(spacing: StyleConstants.Spacing.xl) {
                    Spacer()
                    
                    // Brand section
                    brandSection
                    
                    Spacer()
                    
                    // Action buttons
                    actionButtons
                    
                    // Feature description
                    featureDescription
                }
                .padding(StyleConstants.Spacing.lg)
            }
            .ignoresSafeArea(.all, edges: .top)
            .onAppear {
                startAnimations()
            }
        }
    }
    
    // MARK: - Background
    private var backgroundGradient: some View {
        LinearGradient(
            gradient: Gradient(colors: [
                Color.black.opacity(0.9),
                Color.black.opacity(0.7),
                Color.black.opacity(0.9)
            ]),
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
    }
    
    // MARK: - Brand Section
    private var brandSection: some View {
        VStack(spacing: StyleConstants.Spacing.md) {
            // App icon/logo placeholder
            ZStack {
                Circle()
                    .fill(
                        LinearGradient(
                            gradient: Gradient(colors: [
                                Color.white.opacity(0.3),
                                Color.white.opacity(0.1)
                            ]),
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .frame(width: 100, height: 100)
                    .overlay(
                        Circle()
                            .stroke(Color.white.opacity(0.3), lineWidth: 1)
                    )
                
                Image(systemName: "camera.filters")
                    .font(.system(size: 40, weight: .light))
                    .foregroundColor(.white)
            }
            .scaleEffect(animateTitle ? 1.0 : 0.8)
            .opacity(animateTitle ? 1.0 : 0.0)
            .animation(StyleConstants.Animation.springBouncy.delay(0.2), value: animateTitle)
            
            // App title
            VStack(spacing: StyleConstants.Spacing.xs) {
                Text("StyleFilters")
                    .font(StyleConstants.Typography.largeTitle)
                    .fontWeight(.thin)
                    .foregroundColor(.white)
                
                Text("Professional Photo Filters")
                    .font(StyleConstants.Typography.callout)
                    .foregroundColor(.white.opacity(0.8))
                    .letterSpacing(1.2)
                    .textCase(.uppercase)
            }
            .opacity(animateTitle ? 1.0 : 0.0)
            .offset(y: animateTitle ? 0 : 20)
            .animation(StyleConstants.Animation.smooth.delay(0.4), value: animateTitle)
        }
    }
    
    // MARK: - Action Buttons
    private var actionButtons: some View {
        VStack(spacing: StyleConstants.Spacing.md) {
            // Camera button - primary action
            NavigationLink(destination: ProfessionalCameraView()) {
                HStack(spacing: StyleConstants.Spacing.sm) {
                    Image(systemName: "camera")
                        .font(.system(size: 20, weight: .medium))
                    
                    Text("Open Camera")
                        .font(StyleConstants.Typography.bodyEmphasized)
                }
                .frame(maxWidth: .infinity)
                .frame(height: 56)
                .background(
                    LinearGradient(
                        gradient: Gradient(colors: [
                            Color.white,
                            Color.white.opacity(0.9)
                        ]),
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
                .foregroundColor(.black)
                .cornerRadius(StyleConstants.Layout.cornerRadius)
                .shadow(
                    color: .white.opacity(0.3),
                    radius: 8,
                    x: 0,
                    y: 4
                )
            }
            .scaleEffect(animateButtons ? 1.0 : 0.9)
            .opacity(animateButtons ? 1.0 : 0.0)
            .animation(StyleConstants.Animation.spring.delay(0.6), value: animateButtons)
            
            // Photo library button - secondary action  
            NavigationLink(destination: PhotoPickerView()) {
                HStack(spacing: StyleConstants.Spacing.sm) {
                    Image(systemName: "photo.on.rectangle")
                        .font(.system(size: 18, weight: .medium))
                    
                    Text("Choose from Library")
                        .font(StyleConstants.Typography.body)
                }
                .frame(maxWidth: .infinity)
                .frame(height: 48)
                .background(Color.clear)
                .foregroundColor(.white)
                .cornerRadius(StyleConstants.Layout.cornerRadius)
                .overlay(
                    RoundedRectangle(cornerRadius: StyleConstants.Layout.cornerRadius)
                        .stroke(Color.white.opacity(0.3), lineWidth: 1)
                )
            }
            .scaleEffect(animateButtons ? 1.0 : 0.9)
            .opacity(animateButtons ? 1.0 : 0.0)
            .animation(StyleConstants.Animation.spring.delay(0.8), value: animateButtons)
        }
        .padding(.horizontal, StyleConstants.Spacing.md)
    }
    
    // MARK: - Feature Description
    private var featureDescription: some View {
        VStack(spacing: StyleConstants.Spacing.sm) {
            HStack(spacing: StyleConstants.Spacing.lg) {
                FeatureItem(
                    icon: "wand.and.rays", 
                    title: "AI Filters",
                    description: "Smart enhancement"
                )
                
                FeatureItem(
                    icon: "slider.horizontal.3", 
                    title: "Fine Tune",
                    description: "Precise control"
                )
                
                FeatureItem(
                    icon: "square.and.arrow.up", 
                    title: "Export",
                    description: "High quality"
                )
            }
        }
        .opacity(animateButtons ? 1.0 : 0.0)
        .offset(y: animateButtons ? 0 : 20)
        .animation(StyleConstants.Animation.smooth.delay(1.0), value: animateButtons)
    }
    
    // MARK: - Animation
    private func startAnimations() {
        animateTitle = true
        animateButtons = true
    }
}

// MARK: - Feature Item Component
struct FeatureItem: View {
    let icon: String
    let title: String
    let description: String
    
    var body: some View {
        VStack(spacing: StyleConstants.Spacing.xs) {
            Image(systemName: icon)
                .font(.system(size: 16, weight: .medium))
                .foregroundColor(.white.opacity(0.9))
                .frame(width: 24, height: 24)
            
            Text(title)
                .font(StyleConstants.Typography.caption)
                .fontWeight(.medium)
                .foregroundColor(.white.opacity(0.9))
            
            Text(description)
                .font(StyleConstants.Typography.caption2)
                .foregroundColor(.white.opacity(0.6))
                .multilineTextAlignment(.center)
        }
        .frame(maxWidth: .infinity)
    }
}

#Preview {
    HomeView()
        .preferredColorScheme(.dark)
}